<!-- 订单确认 -->
<template>
  <div class="content">
    <web-header></web-header>
    <div class="createAccount">{{$t('lan.createAccount')}}</div>
    <div class="switch">
      <el-radio-group v-model="formData.customerType" @change="changeRadio" fill="#e6a23c" text-color="#2C2C2C">
        <el-radio-button :label="$t('lan.personal')"></el-radio-button>
        <el-radio-button :label="$t('lan.company')"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="form">
      <el-form label-width="165px" :model="formData" ref="update">
        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('lan.name')">
              <el-input :placeholder="$t('lan.pleaseName')" v-model="formData.name" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('lan.phone')">
              <el-input :placeholder="$t('lan.pleasePhone')" v-model="formData.mobile" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('lan.address')">
              <el-input :placeholder="$t('lan.pleaseShippingAddress')" v-model="formData.address" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('lan.email')">
              <el-input :placeholder="$t('lan.pleaseEnterEmail')" v-model="formData.email" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.customerType === $t('lan.personal')">
          <el-col :span="10">
            <el-form-item :label="$t('lan.certificate')">
              <el-select v-model="formData.cardType" :placeholder="$t('lan.pleaseType')" style="width:100%" size="medium">
                <el-option v-for="i in documentType" :key="i.id" :label="i.code" :value="i.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('lan.number')">
              <el-input :placeholder="$t('lan.pleaseNumber')" v-model="formData.cardNo" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-else>
          <el-col :span="10">
            <el-form-item :label="$t('lan.companyName')">
              <el-input :placeholder="$t('lan.pleaseCompany')" v-model="formData.companyName" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- <div class="form">
      <div class="createAccount">你是否需要开具发票</div>
      <el-row>
        <el-col :span="10">
          <div class="invoice" v-for="i in invoiceList" :key="i.id" @click="selected(i)" :class="i.id === formData.invoiceType?'select':''">{{i.code}}</div>
        </el-col>
        <el-col :span="14" v-if="formData.invoiceType === '3'">
          <div class="formItem">
            <span>企业注册名称</span>
            <el-input placeholder="请输入企业注册名称" v-model="formData.companyRegisterName" style="width:350px;" size="medium"></el-input>
          </div>
          <div class="formItem">
            <span>纳税人识别号</span>
            <el-input placeholder="请输入纳税人识别号" v-model="formData.taxNo" style="width:350px;" size="medium"></el-input>
          </div>
        </el-col>
      </el-row>
    </div> -->
    <div class="form">
      <div class="createAccount">{{$t('lan.productConfirmation')}}</div>
      <div class="product" v-for="i in orderList" :key="i.id">
        <el-row>
          <el-col :span="4">
            <img v-if="i.picUrl" :src="i.picUrl" width="180" height="180" alt="">
            <img v-else src="@/assets/images/1481161992.jpg" width="180" height="180" alt="">
          </el-col>
          <el-col :span="17">
            <el-col :span="24">
              <div class="lineHeight32 productDetail">{{i.categoryName}}</div>
            </el-col>
            <el-col>
              <div class="lineHeight32 productDetail">
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.auxiliaryNum')}}：</span><span style="color:#2c2c2c">{{i.subCategoryTotalCount}}</span>
                </el-col>
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.totalNumDoors')}}：</span><span style="color:#2c2c2c">{{i.doorTotalCount}}</span>
                </el-col>
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.system')}}：</span><span style="color:#2c2c2c">{{i.operationCode}}</span>
                  {{i.serverFlag === '1'?$t('lan.serverRequired'):$t('lan.noServerRequired')}}
                </el-col>
              </div>
            </el-col>
            <el-col>
              <div class="lineHeight32 productDetail">
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.doorColor')}}：</span>{{i.colorValue?i.colorValue:''}}
                  <span :class="i.deviceColor!='11'?'colorValue':''" :style="{background:i.colorValue?'':formatColor(i.deviceColor)}"></span>
                </el-col>
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.cabinetColor')}}：</span>{{i.cabinetColorValue?i.cabinetColorValue:''}}
                  <span :class="i.cabinetColor!='11'?'colorValue':''" :style="{background:i.cabinetColorValue?'':formatColor(i.cabinetColor)}"></span>
                </el-col>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </div>

    </div>
    <div class="totalAmt">
      <el-row>
        <el-col :span="18">
          <div>{{$t('lan.total')}}<span class="font-w">$:{{totamAmt}}</span><span>{{$t('lan.price')}}</span></div>
        </el-col>
        <el-col :span="6">
          <el-button :style="{'background':'#ee781e','color':'#fff','width':'100%','height':'65px',borderRadius:'0px',fontSize:'18px'}" :loading="loading" @click="save">{{$t('lan.confirmOrder')}}</el-button>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
import { documentType, invoiceList, colorList } from '../common'
import { saveOrder, cartComfirm, getCatList } from '../api'
import { Notification } from 'element-ui'
export default {
  data () {
    return {
      orderList: [],
      loading: false,
      documentType: documentType,
      invoiceList: invoiceList,
      formData: {
        name: null,//姓名
        mobile: null,//电话
        address: null,//送货地址
        email: null,//邮箱
        cardType: null,// 证件类型
        // invoiceType: null,// 发票类型
        cardNo: null,//证件号码
        // companyRegisterName: null,//企业注册名称
        // taxNo: null,//纳税人识别号
        companyName: null,// 公司名称
        customerType: this.$t('lan.personal'), // 客户类型
        itemList: JSON.parse(localStorage.getItem('shopId')) ? JSON.parse(localStorage.getItem('shopId')) : [],
        userId: JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')).id : ''
      },
    }
  },
  computed: {
    // 计算产品价格
    totamAmt () {
      let amount = null
      for (let i of this.orderList) {
        amount += i.amt
      }
      return amount
    }
  },
  methods: {
    formatColor (id) {
      for (let i of colorList) {
        if (id === i.id) return i.value
      }
    },
    async fetchCatList () {
      const data = await getCatList({ userId: JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')).id : '' })
      localStorage.setItem('cartList', JSON.stringify(data.datas))
    },
    changeRadio (val) {
      // this.formData.name = null
      // this.formData.mobile = null
      // this.formData.address = null
      // this.formData.email = null
      // this.formData.cardType = null
      // this.formData.cardNo = null
      // this.formData.companyName = null
    },
    selected (val) {
      if (this.formData.invoiceType != '') {
        this.formData.companyRegisterName = null
        this.formData.taxNo = null
      }
      if (val.id === this.formData.invoiceType) return this.formData.invoiceType = null
      this.formData.invoiceType = val.id
    },
    addNum (val, type) {
      if (type === 'add') {
        if (this.categoryTotal >= 8) {
          return Notification({ type: 'error', title: this.$t('lan.error'), message: this.$t('lan.most') })
        }
      }
      if (type === 'sub') {
        if (val.totalNum === 0) return
        val.totalNum -= 1
      }
      else val.totalNum += + 1
    },
    // 获取产品确认列表
    async getList () {
      this.orderList = await cartComfirm({ cartIdList: JSON.parse(localStorage.getItem('shopId')) })
    },
    async save () {
      const email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      const reg = /^1[1|2|3|4|5|6|8|7|9][0-9]\d{4,8}$/
      const cardNo = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      if (!this.formData.name) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.pleasecannot') })
      if (!this.formData.mobile) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.pleaseMobile') })
      if (!reg.test(this.formData.mobile)) return Notification({ type: 'error', title: this.$t('lan.error'), message: this.$t('lan.phoneFormat') })
      if (!this.formData.address) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.addressEmpty') })
      if (!this.formData.email) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.emailEmpty') })
      if (!email.test(this.formData.email)) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.emailFormat') })
      if (this.formData.customerType === this.$t('lan.company')) {
        if (!this.formData.companyName) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.companyEmpty') })
      } else {
        if (!this.formData.cardType) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.pleaseType') })
        if (!this.formData.cardNo) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.numberEmpty') })
      }

      if (this.formData.cardType === '1') {
        if (!this.formData.cardType) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.pleaseType') })
        if (!this.formData.cardNo) return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.numberEmpty') })
        // if (!cardNo.test(this.formData.cardNo)) return Notification({ title: '错误', type: 'error', message: '身份证格式错误' })
      }
      // if (!this.formData.invoiceType) return Notification({ title: '错误', type: 'error', message: '请选择发票' })
      // if (this.formData.invoiceType === '3') {
      //   if (!this.formData.companyRegisterName) return Notification({ title: '错误', type: 'error', message: '企业注册名称不能为空' })
      //   if (!this.formData.taxNo) return Notification({ title: '错误', type: 'error', message: '纳税人识别号不能为空' })
      // }
      const customerName = this.formData.customerType === this.$t('lan.personal') ? '1' : '2'
      try {
        this.loading = true
        const orderData = await saveOrder({ ...this.formData, customerType: customerName, })
        Notification({ title: this.$t('lan.success'), type: 'success', message: this.$t('lan.orderCreate') })
        this.fetchCatList()
        setTimeout(() => this.$router.push(`/payment?sn=${orderData.sn}`), 1000)
        this.loading = false
      } catch (err) {
        this.loading = false
      }

    }
  },
  created () {
    this.getList();
  }
}
</script>
<style scoped>
.content {
  width: 1200px;
  margin: 0 auto;
  padding-top: 16px;
}
.createAccount {
  font-size: 18px;
  color: #2c2c2c;
  padding: 0px 0px 20px;
}
.switch {
  padding: 0px 0px 25px;
  border-bottom: 1px solid #e5e5e5;
}
.switch >>> .el-radio-button__inner {
  color: #d4d4d4;
  font-size: 14px;
}
.form {
  margin-top: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.invoice {
  margin: 0px 0px 20px;
  width: 60%;
  padding: 15px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  color: #555;
  cursor: pointer;
}
.enterprise {
  text-align: left;
}
.product {
  margin-bottom: 20px;
}
.lineHeight32 {
  line-height: 42px;
}
.lineHeight96 {
  line-height: 96px;
}
.productDetail {
  font-size: 14px;
  color: #555;
}
.inputNumber {
  position: relative;
  width: 50%;
  border: 1px solid #e5e5e5;
  margin-top: 33px;
  line-height: 30px;
}
.inputDearcase {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #dcdfe6;
  width: 25%;
  height: auto;
  text-align: center;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 14px;
}
.mainNum {
  padding-left: 30%;
  padding-right: 30%;
  text-align: center;
  font-size: 14px;
}
.inputIncrease {
  position: absolute;
  z-index: 1;
  top: 0px;
  right: 0px;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #dcdfe6;
  width: 25%;
  height: auto;
  text-align: center;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 14px;
}
.totalAmt {
  margin: 30px 0px;
  height: 60px;
  line-height: 60px;
}
.totalAmt > div {
  font-size: 20px;
}
.totalAmt > div span {
  color: #ea5420;
  margin: 0px 5px;
  font-size: 18px;
}

.select {
  position: relative;
  box-shadow: 0px 2px 7px 0px rgba(85, 110, 97, 0.35);
  color: #4abe84;
  border-radius: 10px;
  border: 1px solid rgba(74, 190, 132, 1);
}
.select:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border: 17px solid #4abe84;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-right-radius: 9px;
}
.select:after {
  content: "";
  width: 5px;
  height: 12px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
.formItem {
  padding: 10px 0px;
}
</style>